<template>
    <div class="slide_area">
        <ul class="reply_list">
            <li class="reply_item" v-for="(replyItem,replyIndex) in commentObj.commentList" v-clickoutside="handleClose"
                v-long-tap="{fun:blackShowFun,param:{index:index,replyIndex:replyIndex,userId:replyItem.sendUserId,ifTch:replyItem.sendIfTeacher}}">
                <div class="reply_wrapper"
                     @click.stop="replyComment(commentObj.commentList[replyIndex].secId,commentObj.commentList[replyIndex].appId,replyItem.sendUserId,'回复 '+replyItem.sendUserName+':')">
                    <span v-text="replyItem.sendUserName" flex-box="0"></span>
                    <span v-if="replyItem.replyUserId" class="reply_span">回复</span>
                    <span v-if="text&&text.indexOf('提问')==-1&&!replyItem.replyUserId&&replyItem.sendIfTeacher==1"
                          class="comment_span" v-text="text"></span>
                    <span v-if="text&&text.indexOf('提问')!=-1&&!replyItem.replyUserId" class="comment_span"
                          v-text="text"></span>
                    <span v-if="replyItem.replyUserId" v-text="replyItem.replyUserName"></span>
                    <span class="span">:</span>
                    <span v-html="replyItem.content" v-if="replyItem.type!=2"
                          flex-box="1" ref="copyValue"></span>
                    <audio-player :url="replyItem.content" :time="replyItem.time" :audioId="replyItem.content"
                                  ref="audio" @closeAllAudio="closeAllAudio" v-if="replyItem.type==2"></audio-player>
                    <div class="delWrapper" :style="{width:(replyItem.sendUserId == userId || (userId==classOwner?true:(($route.query.role !=1&&replyItem.sendIfTeacher==1)?true:false)))?0.97+'rem':0.4+'rem'}"
                         v-if="blackShow && blackIndex==index && blackReplyIndex==replyIndex">
                        <div class="delInner" flex="cross:center">
                            <div flex-box="1" flex="main:center cross:center" class="copyBtn"
                                 @click.stop="copy(replyIndex)">复制
                            </div>
                            <div flex-box="0" class="white_line" v-if="replyItem.sendUserId == userId || (userId==classOwner?true:(($route.query.role !=1&&replyItem.sendIfTeacher==1)?true:false))"></div>
                            <div flex-box="1" flex="main:center cross:center" class="copyBtn" v-if="replyItem.sendUserId == userId || (userId==classOwner?true:(($route.query.role !=1&&replyItem.sendIfTeacher==1)?true:false))"
                                 @click.stop="delComment(replyIndex,replyItem.tid)">删除
                            </div>
                        </div>
                        <div class="triangle"></div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="reply_slide" flex="cross:center" v-if="commentObj.commentList&&commentObj.commentList.length>0">
            <span class="span" v-if="text&&text.indexOf('提问')===-1">共<span
                    v-text="commentObj.commentList.length"></span>条评论</span>
            <span class="span" v-if="text&&text.indexOf('提问')!==-1">共<span
                    v-text="commentObj.commentList.length"></span>条提问</span>
        </div>
    </div>
</template>

<script type="text/babel">
    import api from '../api/api.js'
    const API = new api();
    import audioPlayer from '../components/audioComponent.vue'
    export default{
        data(){
            return {
                blackShow: false,
                userId: JSON.parse(sessionStorage.getItem('userInfo')).userId,
                classOwner: JSON.parse(sessionStorage.getItem('userInfo')).classOwner,
            }
        },
        components: {
            audioPlayer
        },
        methods: {
            closeAllAudio(){
                this.$refs.audio.forEach((el, elIndex) => {
                    this.$refs.audio[elIndex].closeAudio();
                });
            },
            /*
             * @description: 关闭黑色弹框
             *
             * @update: cxy (2017-03-07)
             */
            handleClose () {
                this.blackShow = false;
            },
            /*
             * @description: 显示黑色弹框
             *
             * @update: cxy (2017-03-07)
             */
            blackShowFun(param){
                this.blackReplyIndex = param.replyIndex;
                this.blackIndex = param.index;
                this.blackShow = true;
            },
            copy(index){
                this.handleClose();
                this.$util.JsBridge('copy', {
                    copyValue: this.$refs.copyValue[index].innerHTML,
                }, (res) => {
                })
            },
            sonSetComment(res){
                this.commentObj.commentList.push(res);
            },
            delComment(replyIndex, tid){
                    this.handleClose();
                    let param = {
                        tid: tid
                    };
                    API.delComment(param).then((res) => {
                        if (res.code == 200) {
                            this.$delete(this.commentObj.commentList, replyIndex);
                        }
                    })

            },
            replyComment(secId, appId, userId, placeHolder){
                if (userId != this.userId && userId > 0) {
                    if ((this.type == 'APP_HOMEWORK' || this.type == 'APP_MULTI_WORK')&&this.text.indexOf('提问')===-1) {
                        if ((!this.commentObj.myself)&&this.$route.query.role==1) {
                            return
                        }
                    }
                    this.$util.JsBridge('setComment', {
                        placeHolder: placeHolder,
                        limit: 500
                    }, (result) => {
                        let data = {};
                        if (result.content === '') {
                            this.$toast('评论内容不能为空')
                        } else {
                            data.type = result.type;
                            if (data.type == 2) {
                                data.time = result.time;
                            }
                            data.content = this.$util.utf16toEntities(result.content)
                            const param = {
                                classId: this.classId ? this.classId : this.$route.query.classId,
                                type: data.type,
                                appId: appId,
                                secId: secId,
                                content: data.content,
                                appCode: this.type,
                                replyUserId: userId
                            }
                            if (result.type == 2) {
                                param.time = result.time;
                            }
                            API.setComment(param).then((res) => {
                                let {code, rs} = res;
                                if (code == 200) {
                                    this.commentObj.commentList.push(rs);
                                } else {
                                    alert(JSON.stringify(res))
                                }
                            })
                        }
                    })
                }
            },
        },
        props: ['commentObj', 'index', 'type', 'classId', 'text', 'unSlide', 'noReply']
    }
</script>
<style scoped>
    .slide_area .reply_item {
        position: relative;
    }

    .slide_area .reply_item:active {
        background: rgba(0, 0, 0, 0.1);
    }

    .slide_area .reply_wrapper {
        min-height: 0.18rem;
        width: 100%;
        position: relative;
        font-family: PingFangSC-Medium;
    }

    .slide_area .reply_wrapper span {
        font-size: 0.1rem;
    }

    .slide_area .reply_wrapper .reply_span {
        color: #fff;
        font-size: 0.1rem;
        opacity: 0.5;
    }

    .comment_span {
        color: #fff;
        font-size: 0.1rem;
        opacity: 0.5;
    }

    .slide_area .reply_slide {
        margin-top: 0.02rem;
    }

    .slide_area .reply_slide .span {
        font-size: 0.1rem;
        color: #fff;
        opacity: 0.5;
        margin-left: 0;
    }

    .slide_area .reply_slide .slideIcon {
        margin-left: 0.03rem;
        width: 0.06rem;
    }

    .slideIconTop {
        width: 0.06rem;
        -webkit-transform: rotate(-90deg) !important;
        -o-transform: rotate(-90deg) !important;
    }

    .delWrapper {
        height: 0.44rem;
        width: 0.97rem;
        position: absolute;
        top: -0.44rem;
        right: 0.12rem;
        z-index: 1;
    }

    .delWrapper .delInner {
        height: 0.34rem;
        width: 100%;
        background: #2b292a;
        border-radius: 0.06rem;
    }

    .delWrapper .delInner .copyBtn {
        height: 100%;
        color: #fff;
        font-size: 0.1rem;
    }

    .delWrapper .delInner .white_line {
        background: rgba(255, 255, 255, 0.30);
        width: 0.01rem;
        height: 0.24rem;
    }

    .delWrapper .triangle {
        margin: 0 auto;
        width: 0;
        height: 0;
        border-top: 0.1rem solid #2b292a;
        border-left: 0.08rem solid transparent;
        border-right: 0.08rem solid transparent;
    }
</style>
